﻿@model GUI.Models.AdminModels.Arad
@{
    ViewBag.Title = "Articles";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}


 <div id='facebook' >
             <div id='block_1' class='facebook_block'></div>
             <div id='block_2' class='facebook_block'></div>
             <div id='block_3' class='facebook_block'></div>
</div>

   <div id="msg">
       
   </div>
<div id="content-header">
    <div id="breadcrumb">
        <a href="/" title="Acceuil" class="tip-bottom"><i class="icon-home"></i> Acceuil</a>
        <a>articles</a>
  
    </div>
</div>

      <div id="divProgress"></div>

<link href="~/Content/themes/base/minified/jquery-ui.min.css"  rel="stylesheet"/>
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.9.0.js"></script>
<script src="~/Scripts/CircularLoader.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>

<script src="~/Scripts/jquery.jqGrid.min.js"></script>
@section flom{
  
                            <a href="#" class="dropdown-toggle"id="tweets"  data-toggle="dropdown">
                                <i class="glyphicon glyphicon-user"></i>
                             
                                <span id="namesAu"> <i class="caret"></i></span>
                                    
                            </a>
       

   
    }


<div id="box-article">

  <div class="box box-info">
                                <div class="box-header">
                                 
                                    <h3 class="box-title"></h3>
                                    <!-- tools box -->
                                    <div class="pull-right box-tools">
                                   
                                    </div><!-- /. tools -->
                                </div>
                                <div class="box-body">
                                    <form action="#" id="form" method="post">
                                        <div class="form-group">

                                               @Html.TextBoxFor(model => model.Title, new { @class = "form-control", id = "Title", @placeholder = "title" })
                                        
                                        </div>
                                    
                                        <div>
                                       @Html.TextAreaFor(model => model.ArticleContenent, new { @class = "textarea", placeholder = "Message" })
                                       
                                        </div>
                                         <div class="box-footer clearfix">
                              
                                </div>
                                  <div id="foot">
                                      <div class="box-body no-padding">
                                    <table class="table table-striped">
                                        <tr>
                                         
                                            <th>Images </th>
                                            <th>Progress</th>
                                          
                                                                                    </tr>
                                        <tr>
                                            <td>1.Big Images </td>
                                            <td>
                                     
                                                 <img id="imgB" src="" style="display:none;width:56px;height:50px"  />
                                                
                                </td>
                                            
                                          
                                        </tr>
                                        <tr>
                                            <td>2.Medium Image</td>
                                            <td> <img id="imgM" src="" style="display:none;width:56px;height:50px"  /></td>
                                           
                                           
                                        </tr>
                                        <tr>
                                    <td>2.Medium Image</td>
                                            <td> <img id="imgL" src="" style="display:none;width:56px;height:50px"  /></td>

                                            </tr>
                                    </table>
                                </div>


                                     
                                        </div>
                                       
                                        <div id="footersub" style="display:none;">
                                        <input type="button" class="btn-primary" id="btn-primary" value="Submit"/>
                                    </div>

                                      
                                    </form>
                                </div>
                               
                            </div>
    
  </div>

<div id="dialog" style:"display:none" title="Basic dialog">
 
</div>


<script type="text/javascript">
  

    var title = $("#form #Title");
    var article = $("#form #ArticleContenent");
    var buttonSend = $("#sendAjax");
    var mgBig = $("#imgB");
    var mgLit = $("#imgL");
    var mgMed = $("#imgM");
    var t,d,c,aid,id;
    var imgB, imgM, imgL;
    var but = $('#form #footersub #btn-primary');

    

    $(function () {

        
        $.fn.extend({

            checked: function () {
                console.log('fuck it extension checked');

            },
            unchecked: function () {
                console.log('fuck it extension unchecked');

            }
        });


        $("#grid").jqGrid({
            url: "/Articles/GetListArticles",
            datatype: 'json',
            mtype: 'Get',
            colNames: ['Id', 'Title', 'IsActive', 'Date'],
            colModel: [
                { key: true, hidden: true, name: 'Id', index: 'Id' },
                { key: false, hidden: false, name: 'Title', index: 'Title', editable: true, width: 40 },
                { key: false, name: 'IsActive', index: 'IsActive', width: 50, edittype: 'select', stype: "select",
                 editoptions: { value: { True: 'Activé', False: 'Desactivé' } },
                 formatter: imageFormat},
                
                { key: false, name: 'DateCreation', index: 'DateCreation', editable: true, formatter: 'date', width: 50 },

            ],

            pager: jQuery('#pager'),
            rowNum: 10,
            rowList: [10, 20, 30, 40],
            height: '100%',
            viewrecords: true,
            caption: 'Articles',
            emptyrecords: 'No records to display',
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                Id: "0"
            },
            multiselect: true,


            subGrid: true,
            subGridRowExpanded: function (subgrid_id, row_id) {
                var subgrid_table_id, pager_id;
                subgrid_table_id = subgrid_id + "_t";
                pager_id = "p_" + subgrid_table_id;
                $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
                jQuery("#" + subgrid_table_id).jqGrid({
                    url: "/Articles/GetThemebyarticleId/" + '?Id=' + row_id,
                    datatype: "json",
                    mtype: 'GET',
                    colNames: ['Id', 'Sujet'],
                    colModel:
               [
                   { name: 'Id', index: 'Id', hidden: true },
                   { name: 'Subjects', index: 'Subjects', editable: true, width: 40, align: 'left' }

               ],
                    cellEdit: true,
                    rowNum: 20,
                    rowList: [8, 10, 20, 30],
                    pager: pager_id,
                    sortname: 'Id',
                    sortorder: "asc",
                    height: 180,
                    width: 500,
                    viewrecords: true,

                    onSelectRow: function (id) {
                        if (id && id !== lastsel) {
                            jQuery(subgrid_table_id).restoreRow(lastsel);
                            jQuery(subgrid_table_id).editRow(id, true);
                            lastsel = id;
                        }
                    },
                    jsonReader: {
                        id: "id",
                        repeatitems: true
                    },
                    cellEdit: true,
                });
                jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: true, add: true, del: true })
            },
       


            onSelectRow: function (id, status) {


                if (status) {


                    var lastSel = 0;
                    if (id && id !== lastSel) {
                        jQuery('#grid_id').restoreRow(lastSel);
                        lastSel = id;

                    }
                    jQuery('#grid_id').editRow(id, true);

                    GetDetails(lastSel);

                }
                else {


                    setInterval(function () { $("#divProgresscanvas").hide(); }, 1000);

                    $(".fa-times").animate({
                        opacity: 0.25,
                        left: "+=50",
                        height: "toggle"
                    }, 5000, "linear");

                    title.attr("value", "")
                    article.val("");
                    //hide image
                    mgBig.hide();
                    console.log("fuck u")
                }

            },

            autowidth: true,

            //ondblClickRow: function () { console.log(onSelectRow(id)); },




        }).navGrid('#pager', { editRow: true, add: true, del: true, search: false, refresh: true, },
           {
               // edit options
               zIndex: 100,
               url: '/Articles/EditArticles',
               closeOnEscape: true,
               closeAfterEdit: true,
               recreateForm: true,

               afterComplete: function (response) {
                   if (response.responseText) {
                       alert(response.responseText);
                   }
               }

           });


    }
    );


    function imageFormat(cellvalue, options, rowObject) {
        if (rowObject.IsActive == true) {
            return '<img  alt="img true" src="../Images/Green.png">';
        } else {
            return console.log(" it s false");
        }
    };

  var GetDetails=  function (id) {

      $('#facebook').show();  
   
        $("#footersub").show();
   
        var url = "/Articles/GetDetailsArticles?id=" + id;
       
        $.get(url, null, function (data) {
           

            $.each(JSON.parse(data), function (index, value) {
                aid = value.Id;
                d = value.ArticleContenent;
                t = value.Tilte;
                //Images Bytes
                imgB = value.ImageBytes;
                imgM = value.ImageMedium;
                imgL = value.ImageLittle;

                article.val(d);
               title.attr('value',t)
             
                console.log(t);
                debugger;
                //case1
                if ($.isEmptyObject(imgB) == false && $.isEmptyObject(imgM) == true && $.isEmptyObject(imgL) == true) {

                        mgBig.show();
                        mgMed.hide();
                        mgLit.hide();

                        mgBig.attr('src', 'data:image;base64,' + imgB).on("click", function () {

                            $(this).animate({
                                width: "50%",
                                height: "30%",
                                marginLeft: "0.6in",
                                fontSize: "3em",
                                borderWidth: "10px"
                            }, 1500, function () {
                                setInterval(function () { $("#imgB").animate({ width: '56px', height: '50px' }) }, 3000);
                            });

                        });
                }
               //// case2
                if ($.isEmptyObject(imgB) == false && $.isEmptyObject(imgM) == false && $.isEmptyObject(imgL) == true) {
                    mgBig.show();
                    mgMed.show();
                    mgLit.hide();
                    mgBig.attr('src', 'data:image;base64,' + imgB).on("click", function () {

                        $(this).animate({
                            width: "50%",
                            height: "30%",
                            marginLeft: "0.6in",
                            fontSize: "3em",
                            borderWidth: "10px"
                        }, 1500, function () {
                            setInterval(function () { $("#imgB").animate({ width: '56px', height: '50px' }) }, 3000);
                        });

                    });

                    mgMed.attr('src', 'data:image;base64,' + imgM);
                 

                }
               // //case 3
                if ($.isEmptyObject(imgB) == false && $.isEmptyObject(imgM) == false && $.isEmptyObject(imgL) == false) {
                    mgBig.show();
                    mgMed.show();
                    mgLit.hide();
                    mgBig.attr('src', 'data:image;base64,' + imgB).on("click", function () {

                        $(this).animate({
                            width: "50%",
                            height: "30%",
                            marginLeft: "0.6in",
                            fontSize: "3em",
                            borderWidth: "10px"
                        }, 1500, function () {
                            setInterval(function () { $("#imgB").animate({ width: '56px', height: '50px' }) }, 3000);
                        });

                    });

                    mgMed.attr('src', 'data:image;base64,' + imgM);
                    mgLit.attr('src', 'data:image;base64,' + imgL);

                }
               // //case 4
                if ($.isEmptyObject(imgB) == false && $.isEmptyObject(imgM) == true && $.isEmptyObject(imgL) == false) {
                    mgBig.show();
                    mgMed.hide();
                    mgLit.show();
                    mgBig.attr('src', 'data:image;base64,' + imgB).on("click", function () {

                        $(this).animate({
                            width: "50%",
                            height: "30%",
                            marginLeft: "0.6in",
                            fontSize: "3em",
                            borderWidth: "10px"
                        }, 1500, function () {
                            setInterval(function () { $("#imgB").animate({ width: '56px', height: '50px' }) }, 3000);
                        });

                    });

                 
                    mgLit.attr('src', 'data:image;base64,' + imgL);

                }
               // //case 5
                if ($.isEmptyObject(imgB) == true && $.isEmptyObject(imgM) == true && $.isEmptyObject(imgL) == false) {
                    mgBig.hide();
                    mgMed.hide();
                    mgLit.show();
                    mgBig.attr('src', 'data:image;base64,' + imgL).on("click", function () {

                        $(this).animate({
                            width: "50%",
                            height: "30%",
                            marginLeft: "0.6in",
                            fontSize: "3em",
                            borderWidth: "10px"
                        }, 1500, function () {
                            setInterval(function () { $("#imgL").animate({ width: '56px', height: '50px' }) }, 3000);
                        });

                    });


                }
                
              
                //case7
                if ($.isEmptyObject(imgB) == true && $.isEmptyObject(imgM) == false && $.isEmptyObject(imgL) == true) {

                    mgBig.hide();
                    mgMed.show();
                    mgLit.hide();
                    mgBig.attr('src', 'data:image;base64,' + imgM).on("click", function () {

                        $(this).animate({
                            width: "50%",
                            height: "30%",
                            marginLeft: "0.6in",
                            fontSize: "3em",
                            borderWidth: "10px"
                        }, 1500, function () {
                            setInterval(function () { $("#imgM").animate({ width: '56px', height: '50px' }) }, 3000);
                        });

                    });

                }
              
                  });
        });
    
    };


   

</script>

    


  <div class="box box-info"> 
<div id="container">
    <table id="grid"></table>

    <div id="pager"></div>
</div>
      </div>






@section Scripts {
    


}
